import { View } from "@tarojs/components";
import React, { useContext, useState } from "react";
import './index.scss'
import IconFont from "../iconfont";
import { NavContext } from '../../configProvider';
interface NavItem {
  id: number;
  title: string;
  iconName: string;
  nav: string;
};

type FooterNavs = NavItem[];
interface FooterNavProps {
  defaultIndex: number,
  onChangeIndex?: (index: number) => void;
}

const FooterNav: React.FC<FooterNavProps> = ({ defaultIndex = 0, onChangeIndex }) => {
  const [cur, setCur] = useState(defaultIndex)
  const navItems: FooterNavs = useContext(NavContext);
  const handleClickNav = (id: number, navTarget: string) => {
    if (cur === id) {
      return;
    }
    if (onChangeIndex) {
      onChangeIndex(id);
    }
    setCur(id);
  }
  return (
    <View className="footer-nav">
      {navItems.map((item) => (
        <View className="nav-item" key={item.id} onClick={() => handleClickNav(item.id, item.nav)}>
          <View className="nav-icon">
            <IconFont name={item.iconName} size={60} color={cur === item.id ? '#666' : '#aaa'} />
          </View>
          <View className="nav-title" style={{ color: `${cur === item.id ? '#666' : '#aaa'}` }}>{item.title}</View>
        </View>
      ))}
    </View>
  );
};

export default FooterNav;
